<template>
	<view class="m-list-scroll">
		<scroll-view class="scroll-view_H _sch" scroll-x="true"  @scroll="scroll"  scroll-left="120">
				<view class="scroll-view-item_H _scrith" v-for="(item,index) in getListData" :key="index">
					<view class="_title" v-if="showTitle == 1">
						<image :src="item.image"></image>
					</view>
					<view class="_content">
						<rich-text :nodes="item.content"></rich-text>
						<!-- <mBtnCs class="_lbtn" @click="tapY(item.id,item.title,item.phone)" 
						text="有偿咨询"  
						showImg='1' 
						isconcat='0' 
						v-if="item.charge == 1 && item.id != uid"/> -->
						<mBtnCs class="_lbtn" @click="callphone(item.phone)" 
						text="立即咨询"  
						showImg='1' 
						isconcat='0' 
						isphone='1' 
						/>
						<!-- v-if="item.charge == 0 || item.id === uid" -->
					</view>
				</view>
		</scroll-view>
	</view>
</template>


<script>
	import mBtnCs from '@/components/m-btn/m-btn-cs-zx.vue'
	export default {
		components:{mBtnCs},
		name:'m-list-scroll',
		props:{
			title:{
				type:String,
				default:'咨询师'
			},
			showTitle:{
				type:Number,
				default:1
			},
			uid:{
				type:Number,
				default:-1
			},
			listData:{
				type:Array,
				default:()=>{
					return [
						{
							"content":'咨询师咨询师咨询师咨询师咨询师咨询师咨询师咨询师询师咨询师咨询师咨询师咨询师咨询师询师咨询师咨询师咨询师咨询师咨询师',
							"head":'/static/img/header.png'
						},
						{
							"content":'咨询师咨询师咨询师咨询师咨询师咨询师咨询师咨询师询师咨询师咨询师咨询师咨询师咨询师询师咨询师咨询师咨询师咨询师咨询师',
							"head":'/static/img/header.png'
						},
						{
							"content":'咨询师咨询师咨询师咨询师咨询师咨询师咨询师咨询师询师咨询师咨询师咨询师咨询师咨询师询师咨询师咨询师咨询师咨询师咨询师',
							"head":'/static/img/header.png'
						},
						{
							"content":'咨询师咨询师咨询师咨询师咨询师咨询师咨询师咨询师询师咨询师咨询师咨询师咨询师咨询师询师咨询师咨询师咨询师咨询师咨询师',
							"head":'/static/img/header.png'
						}
					]
				}
			}
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};
		},
		computed:{
			getListData(){
				return this.listData
			}
		},
		methods:{
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			callphone(e){
				// console.log(e)
				uni.makePhoneCall({
					phoneNumber:e
				})
			},
			tapY(_id,_title,_phone){
				this.$emit('click',{
					'title':_title,
					'id':_id,
					'phone':_phone
				})
			}
		}
	}
</script>

<style lang="scss">
	.m-list-scroll{
		z-index:10;
		width:90%;
		height:100%;
		margin:auto;
		position:relative;
		margin-top:25upx;
		color:white;

		
		._sch{
			width:100%;
			height:458upx;
			text-align:center;
			white-space:nowrap;

			
				._scrith{
					height:100%;
					position:relative;
					width:458upx;
					display: inline-block;
				
					._title{
						image{
							width:125upx;
							height:125upx;
						}
					}
					._content{
						width: 80%;
						height:218upx;
						display:inline-block;
						position:relative;
						font-size:9pt;
						margin-top:25upx;
						padding:10rpx 25upx;
						border:4rpx solid #4B81E8;
						box-shadow:1upx 3upx 5upx 6upx #4B81E8;
						border-radius:15upx;
						word-break:break-all;
						white-space:pre-wrap;
						
						rich-text{
							height: 216upx;
							display: flex;
							overflow-y:scroll;
						}
					}
				}
		}
		
	}
</style>
